<template>
    <section class="conter single clearfix">
        <article class="content-box thisSite">
            <img src="http://thirdqq.qlogo.cn/g?b=sdk&k=s3zxCIMMOxfQibT9H8la8zg&s=100" alt="slm-logo" class="logo">
            <h2>史莱姆</h2>
            <ul class="web-master">
                <li>
                    <span>真名：</span>
                    <p>郑余国</p>
                </li>
                <li>
                    <span>网名：</span>
                    <p>史莱姆[取于对我影响最大的游戏]</p>
                </li>
                <li>
                    <span>出生：</span>
                    <p>2000年4月</p>
                </li>
                <li>
                    <span>职业：</span>
                    <p>程序员 [前端开发工程师]</p>
                </li>
                <li>
                    <span>专业：</span>
                    <p>软件技术</p>
                </li>
                <li>
                    <span>爱好：</span>
                    <p>技术挑战与创新和探讨、ACG音乐、美术</p>
                </li>
                <li>
                    <span>座右：</span>
                    <p>不切实际的梦才值得我去燃烧！</p>
                </li>
            </ul>

            <br>
            <h3 style="text-align: center;">有许多小伙伴问我，是什么时候接触编程的？学了几年？平时干什么？所以创建此页，希望给各位小伙伴得到一些启发或动力！</h3>
            <hr>

            <h2>个人经历</h2>
            <ul class="web-details">
                <li>
                    <span>初中:</span>
                    <p>
                      初一[上]： 有幸遇到从此改变我人生方向的游戏[我的世界 Minecraft PE],起初只是单纯的玩游戏。初一下册，我接触到了我的世界脚本,一个被游戏所许可的插件,
                      他可以让你去编写代码来扩展游戏乐趣,于是我便入了这坑<b>[2013]接触到了JavaScript</b>,我开始编写游戏脚本,在贴吧发布我的作品,受到了成千上万小伙伴的喜爱。于是我的编程兴趣便由此诞生了。
                    </p>
                    <p>
                      初二[上]： 我的世界第一个服务器诞生了,我成为了第一批进入的玩家。随着时间的推移,我为服务器贡献了很多,得到了副服主的权限来管理玩家。
                      服务器的服主是 "我的世界服务器开发者",服主发现了我写脚本的能力,让我一起来开发服务器插件用的是PHP,当时我拒绝了。半年后因某些原因,退出了他们开始了另一个领域。
                    </p>
                    <p>
                      初三[下]：退出后我开始尝试找合伙人创立一个自己的服务器<i class="img">【查看图片】<img src="/img/git-img/me/1.png"></i>,这时开始接触了<b>Linux的操作[2015]</b>。这是一段快乐是时光,我们的服务器每天都有两位数的玩家,然后便有了玩家赞助VIP。
                    </p>
                </li>
                <li>
                    <span>高中:</span>
                    <p>
                      高一[上]： 随着服务器的诞生,服务器插件授权平台成立约半年后,我尝试着写了第一个PHP服务器插件<b>[初次接触PHP 2016]</b>,随后向授权平台"申请开发者",感谢zx站长的通过,让我的编程不在普通。
                      随后我靠着申请开发者的插件,开启了<b>[代码赚钱 第一桶金]</b>这笔收入对当时的我不小,一天平均两三百左右<i class="img">【查看图片】<img src="/img/git-img/me/4.png"></i>。后面,和初中同学的约定下开发了自己的APP可以下单的软件[web 嵌入式],就是个网站在宿舍宣传,
                      赚了点钱后被宿舍管理员发现,找我去谈话想合作一起搞,被我拒绝...其实是因为挺忙的。
                    </p>
                    <p>
                      高一[下]： 我开始了更新插件版本,建立售后群/售后服务的生活,当时我所<b>担任的职位有[客服/开发者/服主/接单定制插件]</b><i class="img">【查看图片】<img src="/img/git-img/me/7.png"></i>，每天都在赚钱都在忙。后来有了新想法，开发了第二个,第三个,服务器插件并且全上了"精品"二字的归类,
                      平台规定三个精品插件可升为"高级开发者"<i class="img">【查看图片】<img src="/img/git-img/me/3.png"></i>,于是我便有了更多权限。随后接触了<b>[Android 开发]</b>
                    </p>
                    <p>
                      高二[上]： 因为服务器的需要,<b>[2017-5]介入了WEB领域</b>,凭借早已接触的js和php重写好几次后建立了<b>第一个完整的个人博客[2018-8-25]</b>,后又写了一套网站来管理玩家,管理员可以直接在网站上通过交互控制服务器内的事件。<b>随后接触了[易语言开发QQ机器人]</b>
                    </p>
                    <p>
                      高三[下]： [2018-7]赚取了六位数后,我的世界被网易发现了,并采取了代理措施。平台被网易整跨,宣布18-7停止出售授权,19-7闭站和关闭授权系统<i class="img">【查看图片】<img src="/img/git-img/me/5.png"></i>。我退出了平台。
                      开始系统化学习前端,陆续遇到了海文老师、乌拉老师、阿飞老师,让我学习方向丝毫无迷茫,讲课也非常棒。<b>尤其是乌拉老师,感谢许多次凌晨了还在为我指导方向,为我完整化前端知识体系</b>。
                    </p>
                </li>
                <li>
                    <span>大学:</span>
                    <p>
                      大一[上]： 入学后被学长发现,拉入工作室,随后加入任课老师的公司兼职<b>[2018-10 开始自学小程序]</b><i class="img">【查看图片】<img src="/img/git-img/me/2.png"></i>写公司产品(边学边写公司的东西也没谁了),后面又加入社团担任[宣传部长]开发小程序,在社团开展活动时让观众用,
                      提高了社团可以说是逼格吧2333<i class="img">【查看图片】<img src="/img/git-img/me/6.png"></i>
                    </p>
                    <p>
                      大一[下]： 开学后开始找兼职,经过面试后[19-03-16 收到 一家杭州科技有限公司的offer, 03-18入职],工作内容(商城小程序、论坛小程序的前后端开发[单干]和生成小程序系统开发[合作]),不需要去公司在寝室写项目，暑假可以去公司全职上班。
                    </p>
                </li>
            </ul>

            <h2>平时干什么</h2>
            <ul class="web-details">
              <li>
                除去上课和睡觉时间,课余时间占比分别如下[及其稳定的保持了好几个月]：
              </li>
              <li>
                60% 时间是在写项目,学习新东西,研究解决问题方案,60%期间30%是听着歌敲代码的,大多为写项目时 <b>[实战、学习时间 4~5h]</b>
              </li>
              <li>
                20% 逛论坛、各种博客、外国设计类网站、看技术文章、看前端最新的动态 <b>[扩展时间 1~2h]</b>
              </li>
              <li>
                10% 逛B站、看直播、看B站励志的二次元视频 <b>[休息时间 0.1~1h]</b>
              </li>
              <li>
                5% 玩游戏、看小说、看漫画 <b>[娱乐时间 0.1~1h]</b>
              </li>
              <li>
                5% 头疼，代码逻辑卡住需要梳理和换位思考，犯困、生病 <b>[痴呆时间 0.1~1h]</b>
              </li>
            </ul>

            <br>
            <hr>
            <h3 style="text-align: center;">希望给各位小伙伴得到一些启发或动力,但千万不要放弃因为每时每刻都有可能出现的机遇,你不把握而在懊悔这有何意义？其次,感谢您看完我这挺无聊的经历。</h3>

        </article>
    </section>
</template>
<script>
export default {
  head: {
    title: '史莱姆的博客-关于本站'
  }
}
</script>

<style lang="less">
.single .thisSite {
    color: #353535;
    .logo {
        display: block;
        width: 13vw;
        min-width: 100px;
        max-width: 130px;
        margin: 20px auto;
        border-radius: 50%;
    }
    h2 {
        margin-top: 50px;
        font-size: 2rem;
        text-align: center;
    }
    hr {
      margin: 20px 0;
      border: 1px #eee solid;
    }
    .icon-renzheng,
    .icon-renzheng1 {
        font-size: 20px;
        color: #0bc568;
        text-shadow: 1px 1px 2px #ccc;
    }
    a {
        color: #0bc568;
    }
    .web-master,
    .web-technology,
    .web-details  {
        width: 90%;
        max-width: 500px;
        margin: 0 auto;
        font-size: 1.2rem;

        li {
            margin: 10px 0;
        }
        span {
            float: left;
            text-align: left;
            width: 10rem;
            color: #3d3d3d;
            font-weight: bold;
        }
        p {
            display: inline-block;
            min-width: 200px;
            text-indent: 2rem;
            color: #666;
            white-space: nowrap;
        }
        .sub {
            display: block;
            text-indent: 3rem;
            color: #888;

            &:nth-last-child(1) {
                margin-bottom: 20px;
            }
        }
        em {
            margin-right: 8px;
            font-weight: bold;
            text-indent: 2rem;
            color: #3d3d3d;
        }
    }

    .web-master {
        p {
            color: #6d6d6d;
            text-indent: 1rem;
        }
    }
    .web-technology {
        img {
            height: 50px;
            margin: 0 5px;
            vertical-align: middle;
        }
        li {
            width: 350px;
            margin: 5px auto;
        }
        span {
            float: initial;
        }
    }
    .web-details {
        width: 90%;
        max-width: 600px;
        span {
          display: block;
          width: 100%;
          padding: 5px;
          background-color: #eee;
          border-radius: 5px;
        }
        p {
          padding: 10px 0;
          vertical-align: top;
          list-style: initial;
          white-space: initial;
          &:not(:last-child) {
            border-bottom: 1px solid #ddd;
          }
        }
        .img {
          color: #ccc;
          cursor: pointer;

          &:hover img {
            opacity: 1;
            visibility: inherit;
            transform: translateY(1.25rem);
          }

          img {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            max-width: 80vw;
            opacity: 0;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
            visibility: hidden;
            transition: .5s;
            transform: translateY(20%);
          }
        }
    }
}
</style>
